import Avatar from '@/asset/avatar.png';
import ErrorComp from '@/components/common/error-comp';
import LeftToRightView from '@/components/common/motion/left-to-right-view';
import QueryImage from '@/components/common/query-image';
import { Button } from '@/components/ui/button';
import ai from '@/lib/ai';
import { listAllConversations } from '@/service/query/message';
import Link from 'next/link';
import React from 'react';

export const metadata = {
  title: '消息管理',
};

export default async function Page() {
  const { result, error } = await listAllConversations();
  if (error) return <ErrorComp message={error.message} />;

  return (
    <LeftToRightView>
      <div className="p-5 rounded-lg bg-background min-h-[90vh] shadow-lg space-y-8">
        <div className="text-2xl font-bold">消息管理</div>
        <div className="space-y-2">
          {result.map((item, idx) => (
            <React.Fragment key={item.id}>
              <div className="flex items-center justify-between hover:bg-muted gap-5 rounded-lg py-2 px-4">
                <div className="flex items-center gap-3">
                  <QueryImage
                    imageKey={item.image ?? undefined}
                    defaultImage={Avatar}
                    wrapperClassName="w-10 h-10 rounded-full"
                    imgClassName="w-full h-full rounded-full object-cover"
                  />
                  <div className="space-y-1">
                    <div>{item.name}</div>
                    <div className="text-sm text-muted-foreground">
                      {item.email}
                    </div>
                  </div>
                </div>
                <Link href={`/shop/message/${item.id}`}>
                  <Button>回复</Button>
                </Link>
              </div>
              {idx + 1 < result.length && <hr />}
            </React.Fragment>
          ))}
        </div>
      </div>
    </LeftToRightView>
  );
}
